import { defineComponent, onMounted, reactive } from "vue";
import { getRecommendListRequest } from "../../api/api";
import './recommend.scss';

export default defineComponent({
  name: 'RecommendList',
  setup() {
    const state = reactive({
      list: []
    })

    onMounted(() => {
      getRecommendListRequest().then((res) => {
        state.list = res.result
      })
    })

    const recommendList = () => state.list.map((item) => (
      <li>
        <div className="img-wrapper">
          <div className="tip"></div>
          <div className="tip-text">
            <i className="iconfont play">&#xe885;</i>
            <span className="count">{ Math.floor(item.playCount/1000) }万</span>
          </div>
          <img src={item.picUrl} alt={item.copywriter} />
        </div>
        <div className="context ellipsis3">
          { item.name }
        </div>
      </li>
    ))
    return () => (
      <ul className="recommend-list">
        { recommendList() }
      </ul>
    )
  }
})